<template>
	<view class="searchMenu">
		<view class="menu_hd">
			<view class="hd_container">
				<block v-for="item,index in menuList" :key="index">
					<view class="nav_item" @tap="seClick(index)" :class="menuIndex == index?'item_active ':''">
						{{item}}
					</view>
				</block>
				<view class="nav_video" @tap="videoClick">
					视频
				</view>
			</view>
		</view>
		<!-- 第二关键词 -->
		<block v-if="kwState">

			<view class="swiper_similar">
				<swiper class="swiper_box" :display-multiple-items="`${maxNum}`" previous-margin="10rpx">
					<swiper-item class="swiper_item" v-for="item,index in kw" :key="index">
						<view class="swiper_txt ">
							<!-- @tap="funLittle(item)" -->
							<view :class="[item == little ?'txt txt_active':'txt']" @tap="funLittle(item)">
								{{item}}
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</block>
		<!-- 内容区  -->
		<view class="loading" v-if="searchLoading">
			<view style="color: #f6d860" class="la-pacman la-dark la-2x">
				<view></view>
				<view></view>
				<view></view>
				<view></view>
				<view></view>
				<view></view>
			</view>
		</view>
		<view class="content" >
			<searchMenuContent></searchMenuContent>
		</view>
	</view>
</template>

<script>
	import {mapMutations,mapState} from 'vuex'
	import searchMenuContent from '../searchMenuContent/searchMenuContent.vue'
	export default {
		name: "searchMenu",
		props: {
			"seChild": {
				type: Array,
				default: null
			},
			"seData": {
				type: Object,
				default: null,
			}
		},
		components: {
			searchMenuContent
		},
		computed: {
			maxNum() {
				return this.kw.length > 5 ? "5" : this.kw.length
			},
			...mapState(["searchLoading"])
		},
		data() {
			return {
				menuList: ["综合", "收藏高", "学做多"],
				menuIndex: 0,
				state: true, //loading
				little: '全部',
				contentData: null, //列表数据
				contentState: false,
				kw:null,//二级关键字
				kwState:null,//二级关键字 状态
				sousuoParam: {
					"type": 0, //文章，视频  0,1
					"order": 0, //0,1,2
					"sk": '', //二级关键字
				}
			};
		},
		methods: {
			...mapMutations(["saveShParam"]),
			seClick(k) {
				this.$set(this.sousuoParam, 'order', k)
				console.log('排序', k)
				this.menuIndex = k;
				// this.sousuoParam.order = k;

				// console.log(this.sousuoParam)
			},
			funLittle(k) {
				console.log(k)
				this.little = k;
				this.$set(this.sousuoParam, 'sk', k)
			},
			videoClick() {
				if (this.sousuoParam.type == 0) {
					console.log(this.sousuoParam.type)
					this.$set(this.sousuoParam, 'type', 1)
				} else {
					console.log(this.sousuoParam.type)
					this.$set(this.sousuoParam, 'type', 0)
				}
			}
		},
		watch: {
			sousuoParam: {
				// handler是系统自动注入的方法
				handler() {
					this.$emit('child-data', this.sousuoParam)
					console.log('数值变化', this.sousuoParam);
				},
				deep: true, //默认值为false
			}
		},
		created() {
			// console.log(this.$store.state)
			// console.log('组件---1',this.seData.secondary_keywords);
			this.contentData = this.seData.list;
			this.kw = this.seData.secondary_keywords;
			if(this.seData.secondary_keywords.length > 0){
				this.kwState = true;
			}else{
				this.kwState = false
			}
			this.contentState = true;
		}
	}
</script>

<style lang="scss">
	.searchMenu {
		padding-top: 220rpx;
		position: relative;

		// margin-top: 300rpx;
		// background-color: #ccc;
		.menu_hd {
			width: 100%;
			height: 60rpx;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid rgb(235, 235, 235);

			.hd_container {
				width: 90%;
				height: 100%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #686868;

				.nav_item {
					font-weight: bold;
				}

				.nav_video {
					width: 50%;
					text-align: right;
				}

				.item_active {
					color: #000000;
				}
			}
		}

		// list 列表  轮播图

		.swiper_similar {
			background-color: #fff;
			width: 100%;
			height: 54rpx;
			// margin: 20rpx 0;
			padding: 10rpx 0 20rpx;
			// border-top: 1px solid rgb(235, 235, 235);
			// position: -webkit-sticky;
			position: sticky;
			top: 126rpx;
			z-index: 99;

			// background-color: #007AFF;
			.swiper_box {
				width: 100%;
				height: 100%;

				.swiper_item {
					width: 100%;
					height: 100%;

					.swiper_txt {
						width: 100%;
						height: 100%;
						text-align: center;
						line-height: 54rpx;

						// font-size: 20rpx;
						// margin:0 30rpx;
						.txt {
							width: 80%;
							height: 100%;
							margin: 0 auto;
							color: #A0A0A0;
							font-size: 20rpx;
							border-radius: 40rpx;
							background-color: #FAFAFA;
						}

						.txt_active {
							color: #000000;
							font-weight: bold;
							background-color: #FFC533;
							animation: masked .4s linear;
						}
					}

				}
			}
		}

		// css 动画

		@keyframes masked {
			0% {
				transform: scale(.9);
				// transform: translate(0px, 0px);
			}

			100% {
				transform: scale(1);
				// transform: translate(0px, 0px);
			}
		}


		// loading  mask
		.loading {
			position: fixed;
			// width: 100%;
			// height: 100%;
			// background-color: #C0C0C0;
			top: 800rpx;
			left: 30%;
			z-index: 99;
			// transform: translate(0,0%);
		}

	}




	//  loading  css
	.la-pacman,
	.la-pacman>view {
		position: relative;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.la-pacman {
		display: block;
		font-size: 0;
		color: #fff;
	}

	.la-pacman.la-dark {
		color: #333;
	}

	.la-pacman>view {
		display: inline-block;
		float: none;
		background-color: currentColor;
		border: 0 solid currentColor;
	}

	.la-pacman {
		width: 32px;
		height: 32px;
	}

	.la-pacman>view:nth-child(1),
	.la-pacman>view:nth-child(2) {
		width: 0;
		height: 0;
		background: transparent;
		border-style: solid;
		border-width: 16px;
		border-right-color: transparent;
		border-radius: 100%;
		-webkit-animation: pacman-rotate-half-up .5s 0s infinite;
		-moz-animation: pacman-rotate-half-up .5s 0s infinite;
		-o-animation: pacman-rotate-half-up .5s 0s infinite;
		animation: pacman-rotate-half-up .5s 0s infinite;
	}

	.la-pacman>view:nth-child(2) {
		margin-top: -32px;
		-webkit-animation-name: pacman-rotate-half-down;
		-moz-animation-name: pacman-rotate-half-down;
		-o-animation-name: pacman-rotate-half-down;
		animation-name: pacman-rotate-half-down;
	}

	.la-pacman>view:nth-child(3),
	.la-pacman>view:nth-child(4),
	.la-pacman>view:nth-child(5),
	.la-pacman>view:nth-child(6) {
		position: absolute;
		top: 50%;
		left: 200%;
		width: 8px;
		height: 8px;
		border-radius: 100%;
		opacity: 0;
		-webkit-animation: pacman-balls 2s 0s infinite linear;
		-moz-animation: pacman-balls 2s 0s infinite linear;
		-o-animation: pacman-balls 2s 0s infinite linear;
		animation: pacman-balls 2s 0s infinite linear;
	}

	.la-pacman>view:nth-child(3) {
		-webkit-animation-delay: -1.44s;
		-moz-animation-delay: -1.44s;
		-o-animation-delay: -1.44s;
		animation-delay: -1.44s;
	}

	.la-pacman>view:nth-child(4) {
		-webkit-animation-delay: -1.94s;
		-moz-animation-delay: -1.94s;
		-o-animation-delay: -1.94s;
		animation-delay: -1.94s;
	}

	.la-pacman>view:nth-child(5) {
		-webkit-animation-delay: -2.44s;
		-moz-animation-delay: -2.44s;
		-o-animation-delay: -2.44s;
		animation-delay: -2.44s;
	}

	.la-pacman>view:nth-child(6) {
		-webkit-animation-delay: -2.94s;
		-moz-animation-delay: -2.94s;
		-o-animation-delay: -2.94s;
		animation-delay: -2.94s;
	}

	.la-pacman.la-sm {
		width: 16px;
		height: 16px;
	}

	.la-pacman.la-sm>view:nth-child(1),
	.la-pacman.la-sm>view:nth-child(2) {
		border-width: 8px;
	}

	.la-pacman.la-sm>view:nth-child(2) {
		margin-top: -16px;
	}

	.la-pacman.la-sm>view:nth-child(3),
	.la-pacman.la-sm>view:nth-child(4),
	.la-pacman.la-sm>view:nth-child(5),
	.la-pacman.la-sm>view:nth-child(6) {
		width: 4px;
		height: 4px;
	}

	.la-pacman.la-2x {
		width: 64px;
		height: 64px;
	}

	.la-pacman.la-2x>view:nth-child(1),
	.la-pacman.la-2x>view:nth-child(2) {
		border-width: 32px;
	}

	.la-pacman.la-2x>view:nth-child(2) {
		margin-top: -64px;
	}

	.la-pacman.la-2x>view:nth-child(3),
	.la-pacman.la-2x>view:nth-child(4),
	.la-pacman.la-2x>view:nth-child(5),
	.la-pacman.la-2x>view:nth-child(6) {
		width: 16px;
		height: 16px;
	}

	.la-pacman.la-3x {
		width: 96px;
		height: 96px;
	}

	.la-pacman.la-3x>view:nth-child(1),
	.la-pacman.la-3x>view:nth-child(2) {
		border-width: 48px;
	}

	.la-pacman.la-3x>view:nth-child(2) {
		margin-top: -96px;
	}

	.la-pacman.la-3x>view:nth-child(3),
	.la-pacman.la-3x>view:nth-child(4),
	.la-pacman.la-3x>view:nth-child(5),
	.la-pacman.la-3x>view:nth-child(6) {
		width: 24px;
		height: 24px;
	}

	/*
	 * Animations
	 */
	@-webkit-keyframes pacman-rotate-half-up {

		0%,
		100% {
			-webkit-transform: rotate(270deg);
			transform: rotate(270deg);
		}

		50% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-moz-keyframes pacman-rotate-half-up {

		0%,
		100% {
			-moz-transform: rotate(270deg);
			transform: rotate(270deg);
		}

		50% {
			-moz-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-o-keyframes pacman-rotate-half-up {

		0%,
		100% {
			-o-transform: rotate(270deg);
			transform: rotate(270deg);
		}

		50% {
			-o-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes pacman-rotate-half-up {

		0%,
		100% {
			-webkit-transform: rotate(270deg);
			-moz-transform: rotate(270deg);
			-o-transform: rotate(270deg);
			transform: rotate(270deg);
		}

		50% {
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-webkit-keyframes pacman-rotate-half-down {

		0%,
		100% {
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
	}

	@-moz-keyframes pacman-rotate-half-down {

		0%,
		100% {
			-moz-transform: rotate(90deg);
			transform: rotate(90deg);
		}

		50% {
			-moz-transform: rotate(0deg);
			transform: rotate(0deg);
		}
	}

	@-o-keyframes pacman-rotate-half-down {

		0%,
		100% {
			-o-transform: rotate(90deg);
			transform: rotate(90deg);
		}

		50% {
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}
	}

	@keyframes pacman-rotate-half-down {

		0%,
		100% {
			-webkit-transform: rotate(90deg);
			-moz-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}
	}

	@-webkit-keyframes pacman-balls {
		0% {
			left: 200%;
			opacity: 0;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}

		5% {
			opacity: .5;
		}

		66% {
			opacity: 1;
		}

		67% {
			opacity: 0;
		}

		100% {
			left: 0;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}
	}

	@-moz-keyframes pacman-balls {
		0% {
			left: 200%;
			opacity: 0;
			-moz-transform: translateY(-50%);
			transform: translateY(-50%);
		}

		5% {
			opacity: .5;
		}

		66% {
			opacity: 1;
		}

		67% {
			opacity: 0;
		}

		100% {
			left: 0;
			-moz-transform: translateY(-50%);
			transform: translateY(-50%);
		}
	}

	@-o-keyframes pacman-balls {
		0% {
			left: 200%;
			opacity: 0;
			-o-transform: translateY(-50%);
			transform: translateY(-50%);
		}

		5% {
			opacity: .5;
		}

		66% {
			opacity: 1;
		}

		67% {
			opacity: 0;
		}

		100% {
			left: 0;
			-o-transform: translateY(-50%);
			transform: translateY(-50%);
		}
	}

	@keyframes pacman-balls {
		0% {
			left: 200%;
			opacity: 0;
			-webkit-transform: translateY(-50%);
			-moz-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			transform: translateY(-50%);
		}

		5% {
			opacity: .5;
		}

		66% {
			opacity: 1;
		}

		67% {
			opacity: 0;
		}

		100% {
			left: 0;
			-webkit-transform: translateY(-50%);
			-moz-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			transform: translateY(-50%);
		}
	}
</style>
